<template>
  <div class="account-data">
    <div class="add-box">
      <el-button @click="dialogVisible = true" type="primary"
        >新增账户</el-button
      >
    </div>
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column label="角色" width="180">
        <template slot-scope="scope">
          <el-select
            @change="selectChange(scope.row)"
            v-if="scope.row.edit"
            v-model="scope.row.role"
          >
            <el-option
              v-for="option in options"
              :label="option.role"
              :value="option.role"
              :key="option.key"
            ></el-option>
          </el-select>
          <span v-else>{{ scope.row.role }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" width="180">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.username"
            v-if="scope.row.edit"
          ></el-input>
          <span v-else>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="des" label="描述"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope" v-if="scope.row.username != 'admin'">
          <el-button
            @click="scope.row.edit = true"
            v-if="!scope.row.edit"
            size="mini"
            >编辑</el-button
          >
          <el-button
            @click="handleSave(scope.$index, scope.row)"
            v-else
            type="success"
            size="mini"
            >完成</el-button
          >

          <el-button
            @click="handleDelete(scope.$index, scope.row)"
            size="mini"
            type="danger"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <AddAccount
      @update="getData"
      @closedialog="closedialog"
      :dialogVisible="dialogVisible"
      :options="options"
    ></AddAccount>
  </div>
</template>
<script  lang='ts'>
import { Component, Vue, Provide, Watch } from 'vue-property-decorator'
import { allUsers, editUser, deleteUser } from '@/api/user'
import AddAccount from './components/AddAccount.vue'
@Component({ components: { AddAccount } })
export default class AccountData extends Vue {
  @Provide() tableData: any = []
  @Provide() loading: boolean = false
  @Provide() dialogVisible: Boolean = false
  // select数据
  @Provide() options: any = [
    {
      key: 'admin',
      role: '管理员',
      des: '超级管理员。可以查看所有页面。',
    },
    {
      key: 'editor',
      role: '客服',
      des: '正常的编辑器。可以看到除权限页面以外的所有页面',
    },
    {
      key: 'visitor',
      role: '游客',
      des: '只是一个游客。只能看到首页和文档页',
    },
  ]
  created() {
    this.getData()
  }
  getData() {
    this.loading = true
    let _this = this as any
    allUsers()
      .then((res: any) => {
        this.loading = false
        // 设置编辑状态
        res.data.datas.forEach((item: any) => {
          item.edit = false
        })
        this.tableData = res.data.datas
      })
      .catch((err: any) => {
        this.loading = false
        _this.$message.error(err)
      })
  }
  // 创建帐户
  // addAccount() {

  // }
  handleDelete(index: number, row: any): void {
    let _this = this as any
    // 删除
    deleteUser(row._id)
      .then((res: any) => {
        _this.$message({
          message: res.data.msg,
          type: 'success',
        })
        this.getData()
      })
      .catch((err: any) => {
        _this.$error(err)
      })
  }
  handleSave(index: number, row: any): void {
    let _this = this as any
    row.edit = false
    editUser(row._id, row)
      .then((res: any) => {
        _this.$message({
          message: res.data.msg,
          type: 'success',
        })
      })
      .catch((err: any) => {
        _this.$error(err)
      })
  }
  // 选择角色内容
  selectChange(item: any) {
    this.options.map((option: any) => {
      if (option.role == item.role) {
        item.key = option.key
        item.des = option.des
      }
    })
  }
  // handleEdit(index: number, row: any): void {
  //   // 编辑
  //   row.edit = true
  // }
  closedialog() {
    this.dialogVisible = false
  }
}
</script>
 <style  lang='scss' scoped>
</style>